<template>
	<!-- 拆托 -->
	<view class="content">
		<view class="info-views">

			<view class="line-view" style="align-items: center">
				<view class="line-text">被拆分托盘</view>
				<view class="line-value">
					<uni-easyinput v-model="scanList[0].val" border placeholder="请扫描被拆分托盘" :placeholderStyle="placeholderStyle"
						@focus="scanList[0].val=''" :focus="boxFocus" @confirm="boxScan(scanList[0].val,0)"></uni-easyinput>
				</view>
			</view>

			<view class="line-view" style="align-items: center">
				<view class="line-text">目标托盘</view>
				<view class="line-value">
					<uni-easyinput v-model="scanList[1].val" border placeholder="请扫描目标托盘" :placeholderStyle="placeholderStyle"
						@focus="scanList[1].val=''" :focus="boxTargetFocus" @confirm="boxScan(scanList[1].val,1)"></uni-easyinput>
					<!-- <view class="addView" @click="$u.throttle(addPallet, 1000)">
						生成
					</view> -->
				</view>
			</view>

			<view class="line-view" style="align-items: center;font-size: 30rpx;" v-if="boxInfo.name">
				<view class="line-text"> </view>
				<view class="line-value">
					{{boxInfo.name}}
				</view>
			</view>
		</view>

		<view class="info-views" style="padding: 0;background-color: #F8F8F8;" v-if="projectInfo.length>0">
			<view class="project-line-view" v-for="(item,index) of projectInfo" :key='index'>

				<view class="project-view">
					<view class="title-view">
						托盘码
					</view>
					{{item.palletCode}}
				</view>

				<view class="project-view">
					<view class="title-view">
						产品编码
					</view>
					<view class="title-val">
						{{item.productCode}}
					</view>
				</view>


				<view class="project-view">
					<view class="title-view">
						产品名称
					</view>
					{{item.productName}}
				</view>



				<view style="display: flex;width: 100%;padding-bottom: 10rpx;">
					<view class="project-view" style="width: 50%;">
						<view class="title-view">
							可用数量
						</view>
						<view class="title-val">
							{{item.availableQuality||0}}
						</view>
					</view>

					<view class="project-view" style="width:50%;">
						<view class="title-view">
							拆分数量
						</view>
						<view class="title-val" @click.stop>
							<uni-easyinput v-model="item.splitOutNums" border placeholder="请输入"
								:placeholderStyle="placeholderStyle"></uni-easyinput>
						</view>
					</view>
				</view>

			</view>
		</view>

		<uni-collapse ref="collapse">
			<uni-collapse-item v-if="boxInfo.length>0" title="目标托盘">
				<view class="info-views">
					<view class="line-view project-line-view" style="padding: 25rpx 0;" v-for="(item,index) of boxInfo"
						:key='index'>

						<view class="project-view">
							<view class="title-view">
								托盘码
							</view>
							{{item.palletCode}}
						</view>

						<view class="project-view">
							<view class="title-view">
								产品编码
							</view>
							<view class="title-val">
								{{item.productCode}}
							</view>
						</view>


						<view class="project-view">
							<view class="title-view">
								产品名称
							</view>
							{{item.productName}}
						</view>

						<view class="project-view">
							<view class="title-view">
								可用数量
							</view>
							<view class="title-val">
								{{item.availableQuality||0}}
							</view>
						</view>

					</view>
				</view>
			</uni-collapse-item>


			<uni-collapse-item v-if="isAdd" title="已生成目标托盘">
				<view class="info-views" style="padding:0 25rpx ;">
					<view class="line-view project-line-view" style="padding: 0;">
						<view class="project-view">
							<view class="title-view">
								托盘码
							</view>
							<view class="title-val">
								{{addPalletCode}}
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>





		<view class="submit-button" @click="$u.throttle(submit, 1000)">
			提 交
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				isAdd: false,
				addPalletCode: null,
				boxTargetFocus: false,
				boxFocus: false,
				boxInfo: [], //目标托盘
				projectInfo: [], //项目信息
				productFocus: true,
				scanList: [{
					val: null
				}, {
					val: null
				}, {
					val: null
				}],
				placeholderStyle: 'font-size:28rpx;color:#999',
				scrollTop: 0,
				infoList: []
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			that = this;
		},
		methods: {
			// 提交
			submit() {
				if (that.projectInfo.length == 0) {
					this.$u.toast('请扫描被合并托盘');
					return false
				}

				if (that.boxInfo.length == 0 && !that.isAdd) {
					this.$u.toast('请扫描或生成目标托盘');
					return false
				}
				var loop = []
				for (const item of that.projectInfo) {
					if (item.splitOutNums) {
						loop.push(item)
					}
					if (item.splitOutNums && item.splitOutNums > item.availableQuality) {
						this.$u.toast('拆分数量大于可用数量');
						return false
					}
				}
				if (loop.length === 0) {
					this.$u.toast('至少填写一项拆分数量');
					return false
				}

				uni.showLoading({
					mask: true,
					title: '请稍后...'
				})
				const param = {
					newPalletCode: null,
					barcodeCartonNoSaveRequests: that.projectInfo
				}
				if (that.isAdd) {
					param.newPalletCode = that.addPalletCode
				} else {
					param.newPalletCode = that.boxInfo[0].palletCode
				}
				this.$u.post('/wms/mobile/api/splitPalletCode', param).then(res => {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '操作成功'
					})
					setTimeout(function() {
						uni.redirectTo({
							url: 'palletSplit'
						})
					}, 1500);
				})


			},
			boxScan(e, i) {
				//i: 0 被拆分  1 目标托盘
				if (!e) {
					return;
				}
				uni.showLoading({
					mask: true,
					title: '请求中...'
				});
				that.$u.post('/wms/mobile/api/getPalletCodeDetail', {
					palletCode: e
				}).then(res => {
					if (res.code != 0) {
						this.$u.toast(res.message)
						return;
					}
					if (i == 0) {
						// 被拆分
						if (res.data.length == 0) {
							this.$u.toast('该托盘暂无数据');
							that.boxFocus = false
							setTimeout(function() {
								that.$nextTick(function() {
									that.boxFocus = true
								})
							}, 100);
							return false
						}
						if (that.boxInfo.length > 0) {
							if (res.data[0].palletCode == that.boxInfo[0].palletCode) {
								this.$u.toast('该托盘已扫码');
								that.boxFocus = false
								setTimeout(function() {
									that.$nextTick(function() {
										that.boxFocus = true
									})
								}, 100);
								return false
							}
						}

						let list = res.data
						for (const item of list) {
							item.isCheck = 0
							item.splitOutNums = null
						}
						that.projectInfo = list
						that.boxTargetFocus = false
						setTimeout(function() {
							that.$nextTick(function() {
								that.boxTargetFocus = true
							})
						}, 100);
					} else {
						// 目标
						if (res.data.length == 0) {
							this.$u.toast('该托盘暂无数据');
							that.boxTargetFocus = false
							setTimeout(function() {
								that.$nextTick(function() {
									that.boxTargetFocus = true
								})
							}, 100);
							return false
						}
						if (that.projectInfo.length > 0) {
							if (res.data[0].palletCode == that.projectInfo[0].palletCode) {
								this.$u.toast('该托盘已扫码');
								return false
							}
						}

						that.addPalletCode = null
						that.isAdd = false
						that.boxInfo = res.data
					}
				});
			},
			addPallet() {
				if (that.isAdd) {
					this.$u.toast('已生成目标托盘');
					return false
				}
				uni.showLoading({
					mask: true,
					title: '请稍后...'
				})
				this.$u.post('/wms/mobile/api/createPalletCode', {}).then(res => {
					that.boxInfo = []
					that.scanList[1].val = res.data
					that.addPalletCode = res.data
					that.isAdd = true
				})

			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.content {
		height: 100%;
	}

	.pop-view {
		height: 700rpx;
		width: 650rpx;
		padding: 15rpx 25rpx;
		display: flex;
		font-size: 35rpx;
		z-index: 9;
		flex-direction: column;

		.pop-btn {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #f8f8f8;

			.pop-button {
				width: 50%;
				background-color: #3067e8;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 75rpx;
				font-size: 35rpx;
			}

			.butLeft {
				background-color: #f8f8f8;
				color: #3471ff;
			}
		}

		.pop-info {
			margin: 35rpx 0 25rpx 0;
			font-size: 38rpx;
			width: 600rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			/* 指定显示的行数 */
		}

		.frames-box {
			width: 299rpx;
			font-size: 30rpx;
			padding-left: 10rpx;
			color: #999;
		}

		.qty-box {
			width: 290rpx;
		}

		view {
			display: flex;
			align-items: center;
		}
	}

	.info-views {
		background-color: #fff;
		padding: 15rpx 25rpx;
		padding-bottom: 10rpx;
		margin-bottom: 25rpx;
	}



	.mini-text {
		font-size: 30rpx;
	}

	.sub-text {
		margin-left: 10rpx;
		color: #3067e8;
		text-decoration: underline;
	}

	.project-view {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		height: 60rpx;

		view {
			display: flex;
		}
	}

	.project-line-view {
		width: 96%;
		margin: 15rpx auto;
		padding: 10rpx 20rpx;
		flex-direction: column;
		border-radius: 15rpx;
		background-color: #fff;
		border: 5rpx solid #fff;
	}

	.isCheck {
		border: 5rpx solid #2a5cd0;
	}


	.title-view {
		width: 150rpx;
		color: #909399;
	}

	.title-val {
		width: 170rpx;
		color: #303133;
	}

	.submit-button {
		background-color: #3067e8;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		width: 96%;
		border-radius: 15rpx;
		height: 80rpx;
		font-size: 38rpx;
	}



	.line-view {
		width: 100%;
		font-size: 30rpx;
		display: flex;
		align-items: flex-start;
		padding: 15rpx 0;


		.line-text {
			width: 160rpx;
			font-weight: 700;
			color: #555;
		}

		.line-value {
			width: 550rpx;
			display: flex;
			color: #6a6a6a;
		}
	}

	.addView {
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3067e8;
		padding-left: 15rpx;
		font-weight: 700;
	}

	.addView:active {
		color: #8f8f8f;
	}
</style>